<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFlag"
      width="40%"
      @close="cancel"
    >
      <div class="center-container">
        <el-steps :active="active" align-center>
          <el-step title="第一步"/>
          <el-step title="第二步"/>
          <el-step title="第三步"/>
        </el-steps>
      </div>
      <div style="margin: 10px 20px;margin-right: 80px;">
        <el-form :rules="rules" ref="ruleForm" :model="dataForm" label-width="140px" class="template-form">
          <!--     步骤一     -->
          <div v-if="active == 0">
            <el-form-item label="模板名称:" prop="templateName">
              <el-input v-model="dataForm.templateName" :disabled="type == 'view'" size="small" placeholder="请输入模板名称"></el-input>
            </el-form-item>
            <el-form-item label="通道类型:" prop="channelType">
              <el-select v-model="dataForm.channelType" :disabled="type == 'view'" @change="changeChannel" size="small" placeholder="请选择通道">
                <el-option
                  v-for="item in channelDict"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value * 1">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通道选择:" prop="appId">
              <el-select v-model="dataForm.appId" :disabled="(appMessageTypeShow) || (type == 'view')" size="small" placeholder="请选择通道App">
                <el-option
                  v-for="item in channelAppDict"
                  :key="item.appId"
                  :label="item.appName"
                  :value="item.appId * 1">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="消息类型:" prop="messageType">
              <el-select v-model="dataForm.messageType" :disabled="true"  size="small" placeholder="请选择消息类型">
                <el-option
                  v-for="item in messageTypeDict"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模板状态:" prop="templateStatus">
              <el-switch
                v-model="dataForm.templateStatus"
                :disabled="type == 'view'"
                active-text="已启用"
                :active-value="1"
                :inactive-value="0"
                size="small"
                inactive-text="未启用">
              </el-switch>
            </el-form-item>
          </div>
          <!--     步骤二     -->
          <div v-if="active == 1">
            <!--    站内信     -->
            <div v-if="dataForm.channelType == 0">
              <el-form-item label="模板内容:" prop="relatedParameter.templateContext">
                <div>
                  <el-input v-model="dataForm.relatedParameter.templateContext" type="textarea" :rows="3" :disabled="type == 'view'" size="small" placeholder="请输入模板内容"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="接收人列表:" prop="relatedParameter.userIds">
                <el-select v-model="userData" @change="selectUserIds" multiple placeholder="请选择接收人">
                  <el-option
                    v-for="item in users"
                    :key="item.id + ''"
                    :label="item.nickname"
                    :value="item.id + ''">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <!--     步骤三     -->
      <div v-if="active == 2" style="margin: 10px 20px; text-align: center">
        <el-table
          :data="templateParam"
          style="width: 100%">
          <el-table-column label="模板参数" width="200" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.key" :disabled="type == 'view'" size="small" placeholder="请输入相关key"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="平台参数" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.value" placeholder="请输入相关参数" style="width: 100%;">
                <el-option
                  v-for="item in messageDefaultParams"
                  :disabled="type == 'view'"
                  size="small"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark == null ? '' : item.remark }}</span>
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column v-if="type != 'view'" width="80" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" icon="el-icon-delete" plain @click="handleDeleteParam(scope.row)"></el-button>
            </template>
          </el-table-column>
          <div slot="append" v-if="type != 'view'">
            <el-button size="mini" type="primary" icon="el-icon-plus" plain @click="handleAddParam"></el-button>
          </div>
        </el-table>
      </div>
      <div class="dialog-footer">
        <el-button style="margin-top: 12px" v-if="active != 0" @click="previous">上一步</el-button>
        <el-button style="margin-top: 12px" v-if="active !== 2" @click="next">下一步</el-button>
        <el-button style="margin-top: 12px" v-if="active === 2 && type != 'view'" @click="save" type="primary">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import {
  getAppByChannelType,
  getById,
  getMessageTypeByChannelType,
  saveTemplate,
  updateById
} from "@/api/message/template"
import axios from "axios";
import {listData} from "@/api/system/dict/data";
import {listSimpleUsers} from "@/api/system/user";

export default {
  name: "templateAdd",
  components: { vueJsonEditor },
  data() {
    const _this = this
    return {
      dynamicTags: [],
      dynamicToCCTags: [],
      inputVisible: false,
      inputVisibleToCC: false,
      inputValue: '',
      inputValueToCC: '',
      selectedRecipient: null,
      selectedRecipients: [],
      users: [],
      userData: [],
      active: 0,
      type: 'add',
      title: '新增模板',
      dialogFlag: false, // dialog显示隐藏
      channelSelectShow: true,
      appMessageTypeShow: true,
      hasJsonFlag: true, // json是否验证通过 （true为通过，false为失败）
      jsonobj: {},
      dataForm: {
        pushRange: 0,
        messageType: '1',
        relatedParameter: {}
      },
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      templateParam: [], // 自定义参数
      pushMethodDict: [], // 推送方式字典
      userDict: [], // 用户类型字典
      userTypeDict: [], // 外部人员类型字典
      channelTypeDict: [], // 通道类型字典
      channelAppDict: [], // 通道App字典
      messageTypeDict:[
        { id: '1', name: '文本消息' },
      ], // 消息类型字典
      channelDict: [], // 通道字典
      providerTypeDict: [], // 运营商类型字典
      messageDefaultParams: [],
      modeList: [
        'code'
      ],
      options: {
        search: false,
        history: false,
      },
      rules: {
        templateName: [
          {
            required: true,
            message: "请输入模板名称",
            trigger: 'blur'
          },
          { max: 50, message: '输入内容超出限制，请重新编辑。', trigger: 'blur' }
        ],
        channelType: [
          {
            required: true,
            message: "请选择通道类型",
            trigger: 'blur change'
          },
        ],
        appId: [
          {
            required: true,
            message: "请选择消息通道",
            trigger: 'blur'
          },
        ],
        messageType: [
          {
            required: true,
            message: "请选择消息类型",
            trigger: 'blur change'
          },
        ],

        'relatedParameter.templateContext': [
          {
            required: true,
            message: "请输入模板内容站内信",
            trigger: 'blur'
          },
        ],


        'relatedParameter.templateId': [
          {
            required: true,
            message: "请输入模板ID",
            trigger: 'blur'
          },
        ],


        'relatedParameter.templateCode': [
          {
            required: true,
            message: "请输入模板编码",
            trigger: 'blur'
          },
        ],
        'relatedParameter.users': [
          {
            required: true,
            message: "请输入配置信息",
            trigger: 'blur'
          },
        ],
      },
    }
  },
  mounted() {
    this.queryParams.dictType = 'message_params'
    listData(this.queryParams).then(res => {
      this.messageDefaultParams = res.data.list
    })
    this.pushMethodDict = this.$store.state.dict.dictDatas.message_push_method
    this.userDict = this.$store.state.dict.dictDatas.message_user_type
    this.channelDict = this.$store.state.dict.dictDatas.message_channel
    this.providerTypeDict = this.$store.state.dict.dictDatas.provider_type
    this.userDict.forEach(item => {
      if (item.value === '2' || item.value === '3') {
        this.userTypeDict.push(item)
      }
    })
    listSimpleUsers().then(response => {
      this.users = response.data;

    })
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let users = this.inputValue;
      if (users) {
        this.dynamicTags.push(users);
      }
      this.inputVisible = false;
      this.inputValue = '';
      this.dataForm.relatedParameter.users = this.dynamicTags;
    },

    selectUserIds() {
      let userData = this.userData;
      this.dataForm.userIds = userData.join(',');
    },
    // 删除参数
    handleDeleteParam(row) {
      const data = this.templateParam.filter(item => !(row.key === item.key))
      this.templateParam = data
    },
    // 新增参数
    handleAddParam() {
      var data = { id: Date.now(), key: '', value: ''}
      this.templateParam.push(data)
    },
    // 上一步
    previous() {
      this.active--;
    },
    // 下一步
    next() {
      switch (this.active) {
        case 0:
          this.active1();
          break;
        case 1:
          this.active2();
          break;
        case 2:
          this.active3();
          break;
      }
    },
    active1() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.active++
        }
      })
    },
    active2(){
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          var dataList = []
          var regex = /\{([^}]+)\}/g
          var match
          var templateParam = []
          //存 users
          let userList = []
          if (this.dataForm.userIds != null && this.dataForm.userIds !== ""){
            userList = this.dataForm.userIds.toString().split(",")
          }
          this.dataForm.relatedParameter.users = userList

          if ([0, 3].includes(this.dataForm.channelType)) {
            if (this.dataForm.channelType == 0) {
              templateParam = this.dataForm.relatedParameter.templateContext
            }
          }
          while ((match = regex.exec(templateParam)) !== null) {
            dataList.push(match[1]);
          }
          this.templateParam = []
          dataList.forEach(item => {
            var i = 1;
            var dataId = Date.now().toString(36) + Math.random().toString(36).substr(2, 9) + i
            var data = {
              id: dataId + i,
              key: item,
              value: ""
            }
            if (this.dataForm.relatedParameter.templateParam != null){
              data.value = this.dataForm.relatedParameter.templateParam[item] == null ? '' : this.dataForm.relatedParameter.templateParam[item]
            }
            this.templateParam.push(data)
            i++
          })
          this.active++
        }
      })
    },
    // JSON配置改变事件
    jsonChange(value) {
      this.hasJsonFlag = true
    },
    onError(value) {
      this.hasJsonFlag = false
    },
    // 新增模板
    addTemplate(){
      this.type = 'add'
      this.title = '新增模板'
      this.dialogFlag = true
    },
    // 编辑模板 - 回显
    editTemplate(data){
      const fromData = data
      this.dialogFlag = true
      this.channelSelectShow = false
      this.appMessageTypeShow = false
      this.type = 'edit'
      this.title = '编辑模板'
      this.dataForm = fromData
      this.jsonobj = JSON.parse(this.dataForm.relatedParameter)
      this.userData = this.jsonobj.users
      this.dataForm.relatedParameter = this.jsonobj
      this.dataForm.channelType = fromData.pushWays.channelType
      this.dataForm.messageType = fromData.pushWays.messageType
      if (this.dataForm.relatedParameter.templateParam != null || this.dataForm.relatedParameter.templateParam != undefined) {
        this.templateParam = Object.keys(this.dataForm.relatedParameter.templateParam).map(key => ({ key, value: this.dataForm.relatedParameter.templateParam[key] }))
      }
      if (this.dataForm.relatedParameter.users !== '' && this.dataForm.relatedParameter.users !== undefined) {
        this.dynamicTags = this.dataForm.relatedParameter.users
      }

      this.changePushRange()
      getAppByChannelType({channelType: this.dataForm.channelType}).then(res => {
        this.channelAppDict = res.data
      })
    },
    // 查看模板 - 回显
    viewTemplate(data){
      const fromData = data
      this.dialogFlag = true
      this.channelSelectShow = false
      this.appMessageTypeShow = false
      this.type = 'view'
      this.title = '查看模板'
      this.dataForm = fromData
      this.jsonobj = JSON.parse(this.dataForm.relatedParameter)
      this.userData = this.jsonobj.users
      this.dataForm.relatedParameter = this.jsonobj
      this.dataForm.channelType = fromData.pushWays.channelType
      this.dataForm.messageType = fromData.pushWays.messageType
      if (this.dataForm.relatedParameter.templateParam != null || this.dataForm.relatedParameter.templateParam != undefined) {
        this.templateParam = Object.keys(this.dataForm.relatedParameter.templateParam).map(key => ({ key, value: this.dataForm.relatedParameter.templateParam[key] }))
      }
      this.changePushRange()
      getAppByChannelType({channelType: this.dataForm.channelType}).then(res => {
        this.channelAppDict = res.data
      })
    },
    // 场景中点击查看
    viewById(id) {
      getById(id).then(res => {
        let data = res.data
        data.pushWays = JSON.parse(data.pushWays)
        this.viewTemplate(res.data)
      })
    },
    // 克隆模板 - 回显
    cloneTemplate(data) {
      const fromData = data
      this.dialogFlag = true
      this.channelSelectShow = false
      this.appMessageTypeShow = false
      this.type = 'add'
      this.title = '新增模板'
      this.dataForm = fromData
      this.jsonobj = JSON.parse(this.dataForm.relatedParameter)
      this.userData = this.jsonobj.users
      this.dataForm.relatedParameter = this.jsonobj
      this.dataForm.channelType = fromData.pushWays.channelType
      this.dataForm.messageType = fromData.pushWays.messageType
      if (this.dataForm.relatedParameter.templateParam != null || this.dataForm.relatedParameter.templateParam != undefined) {
        this.templateParam = Object.keys(this.dataForm.relatedParameter.templateParam).map(key => ({ key, value: this.dataForm.relatedParameter.templateParam[key] }))
      }
      this.changePushRange()
      if (this.dataForm.relatedParameter.users !== '' && this.dataForm.relatedParameter.users !== undefined) {
        this.dynamicTags = this.dataForm.relatedParameter.users
      }
      getAppByChannelType({channelType: this.dataForm.channelType}).then(res => {
        this.channelAppDict = res.data
      })
    },
    // 用户类型变化
    changeUsers() {
      this.channelSelectShow = false
    },
    // 推送类型变化
    changePushRange() {
      if (this.dataForm.pushRange !== 2) {
        this.userTypeDict = this.userDict
      } else {
        this.userTypeDict = []
        this.userDict.forEach(item => {
          if (item.value === '2' || item.value === '3') {
            this.userTypeDict.push(item)
          }
        })
      }
    },
    // 消息通道变化
    changeChannel() {
      this.appMessageTypeShow = false
      getAppByChannelType({channelType: this.dataForm.channelType}).then(res => {
        this.channelAppDict = res.data
      })
    },
    // 点击确定
    save() {
      if (!this.checkTemplateParam()) {
        this.$message.warning("模板参数不合规")
        return
      }
      var paramsList = this.templateParam.filter(item => item.key && item.value)
      var templateParam = paramsList.reduce((acc, cur) => {
        if (cur.key != '' || cur.value != '') {
          acc[cur.key] = cur.value
          return acc
        }
      }, {})
      // 补充相关参数
      if (this.dataForm.channelType == 0) {
        // 站内信的用户类型为平台UserID
        this.dataForm.usersType = 4
      }

      this.dataForm.relatedParameter.templateParam = templateParam
      this.dataForm.relatedParameter = JSON.stringify(this.dataForm.relatedParameter)
      let pushWays = {}
      pushWays.channelType = this.dataForm.channelType
      pushWays.messageType = this.dataForm.messageType
      this.dataForm.pushWays = JSON.stringify(pushWays)
      if (this.type === 'add') {
        saveTemplate(this.dataForm).then(res => {
          if (res.code === 0) {
            this.$message.success("新增成功")
            this.cancel()
          } else {
            this.$message.error("新增失败")
            //失败后还原参数
            this.dataForm.relatedParameter = JSON.parse(this.dataForm.relatedParameter)
          }
        }).catch(error => {
          this.dataForm.relatedParameter = JSON.parse(this.dataForm.relatedParameter)
        })
      }
      if (this.type === 'edit') {
        updateById(this.dataForm).then(res => {
          if (res.code === 0) {
            this.$message.success("编辑成功")
            this.cancel()
          } else {
            this.$message.error("编辑失败")
            //失败后还原参数
            this.dataForm.relatedParameter = JSON.parse(this.dataForm.relatedParameter)
          }
        }).catch(error => {
          this.dataForm.relatedParameter = JSON.parse(this.dataForm.relatedParameter)
        })
      }
    },
    // 校验模板参数是否合规
    checkTemplateParam() {
      var status = true
      this.templateParam.forEach(item  => {
        if ((item.key == '' && item.value != '') || (item.key != '' && item.value == '')) {
          status = false
        } else {
          status = true
        }
      })
      return status
    },
    cancel() {
      this.channelSelectShow = true
      this.appMessageTypeShow = true
      this.dialogFlag = false;
      this.dataForm = {};
      this.$refs['ruleForm'].clearValidate();
      this.$emit('restOnLoad');
    },
  }
}
</script>

<style scoped>
.template-form ::v-deep .el-textarea__inner {
  resize: none;
  min-height: 111.6px !important;
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid rgb(204, 204, 204);
}

.product-form ::v-deep .el-form-item__label {
  color: #3f4448;
  font-weight: 400;
}

.el-form-item .el-select {
  width: 100%;
}

.form-json-editor {
  pointer-events: none;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
